<template>
  <div>
    <el-dialog title="请登录" :visible="showDialog" width="35%" :show-close="false" class="dialog">
      <verification-code
        :oncancel="oncancel"
        :onGetCode="onGetCode"
        :onSubmitResult="onSubmitResult"
      >
      </verification-code>
    </el-dialog>
    <el-card>
      <div slot="header">
        <span>号码列表</span>
        <el-tooltip content="获取号码列表是否使用手机校验" placement="top">
          <el-select :clearable="true" size="mini" class="header-select" v-model="useToken" placeholder="使用验证">
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-tooltip>
        <el-button class="header-button" type="text" @click="getData">刷新</el-button>
        <el-button class="header-button" type="text" @click="exportData">导出</el-button>
      </div>
      <div style="padding-left: 120px;">
        <qry-num :data="data"></qry-num>
      </div>

    </el-card>
  </div>
</template>

<script>
import api from '@/api/modular/main/qryNum.js'
import qryNum from './component/numbers.vue'
import { Loading } from 'element-ui'
import verificationCode from '../components/verificationCode.vue'
export default {
  components: { qryNum, verificationCode },
  data() {
    return {
      showDialog: false,
      options: [
        {
          value: false,
          label: '否'
        },
        {
          value: true,
          label: '是'
        }
      ],
      unresolvedData: [],
      data: [],
      useToken: true
    }
  },
  methods: {
    oncancel() {
      this.showDialog = false
    },
    onGetCode(number) {
      api.getVerificationCode(number).then(res => {
        console.log(res)
        if (res.code && res.code === '0000') {
          this.$message.success('验证码已发送')
        } else {
          if (res.msg) {
            this.$message.error(res.msg)
          } else {
            this.$message.error('发送验证码失败')
          }
        }
      }).catch(err => {
        console.log(err)
        this.$message.error('发送验证码发生错误')
      })
    },
    onSubmitResult(number, code) {
      const param = {
        number: number,
        code: code
      }
      api.checkVerificationCode(param).then(res => {
        if (res.code && res.code !== 200) {
          if (res.message) {
            this.$message.error(res.message)
          } else {
            this.$message.error('验证码校验失败')
          }
        } else if (res.success) {
          this.getData(this.useToken)
        }
      }).catch(err => {
        console.log(err)
        this.$message.error('校验验证码发生错误')
      })
    },
    exportData() {
      api.export(this.unresolvedData).then(res => {
        const blob = new Blob([res.data])
        const fileName = 'numbers.xls'
        const elink = document.createElement('a')
        elink.download = fileName
        elink.style.display = 'none'
        elink.href = URL.createObjectURL(blob)
        document.body.appendChild(elink)
        elink.click()
        URL.revokeObjectURL(elink.href) // 释放URL 对象
        document.body.removeChild(elink)
      })
    },
    getData() {
      const loading = Loading.service({
        lock: true,
        text: '加载中……',
        background: 'rgba(0, 0, 0, 0.7)'
      })
      const newData = []
      const numbers = []
      api.getNumbers(this.useToken).then(res => {
        console.log(res)
        if (res.requireToken) {
          this.$message.warning('登录失效，请重新通过手机验证码登录！')
          this.showDialog = true
          loading.close()
          return
        }
        for (const key in res) {
          const result = res[key]
          if (result &&
              result.data &&
              result.data.result &&
              result.data.result.data &&
              result.data.result.data.frontline &&
              result.data.result.data.frontline === 1) {
            numbers.push ({number: key, correct: true})
          } else {
            numbers.push ({number: key,correct: false})
          }
        }
        if (numbers.length > 0) {
          let data = []
          numbers.forEach(item => {
            if (item.correct === true) {
              this.unresolvedData.push(item.number)
            }
            if (data.length === 5) {
              newData.push(data)
              data = []
            }
            data.push(item)
          })
          newData.push(data)
          this.data = newData
        }
        if (this.unresolvedData.length === 0) {
          this.$message.warning('没有获取到合适的号码，请刷新')
        }
        loading.close()
      }).catch(err => {
        loading.close()
        console.log(err)
        this.$message.error('获取号码列表失败')
      })
    }
  },
  mounted() {
    this.getData()
  }
}

</script>

<style>
  /*中间的过度的横线*/
  .link-top {
    width: 50%;
    height: 1px;
    border-top: solid #ACC0D8 1px;
  }

  /*画一条再右边的竖线*/
  .link-right {
    width: 50px;
    height: 20%;
    border-right: solid #ACC0D8 1px;
  }

  .header-button {
    float: right;
    padding: 6px 10px
  }

  .header-select {
    float: right;
    padding: 0px 10px;
    width: 120px;
  }
</style>
